function Table(options) {
  if (typeof options.el === 'string') {
    this.el = document.querySelector(options.el)
  } else {
    this.el = options.el
  }

  this.data = options.data || []
  this.columns = options.columns || []

  // console.log(this.el)
  // console.log(this.data)
  // console.log(this.columns)

  // 初始化
  this.init()
}

Table.prototype.init = function () {
  const table = document.createElement('table')
  table.border = 1
  // 创建表头
  const head = this.createHead()
  // 创建内容
  const body = this.createBody()
  // 渲染 table
  table.innerHTML = `
    <thead>
      <tr>${head}</tr>
    </thead>
    <tbody>${body}</tbody>
  `
  // 把 table 添加到 el
  this.el.appendChild(table)
}
Table.prototype.createHead = function () {
  return this.columns.map(function (val) {
    return `<th>${val.title}</th>`
  }).join('')
}
Table.prototype.createBody = function () {
  const _this = this
  // 生成每一行数据
  const tbody = this.data.map(function (rowData) {
    // 生成当前行有多少列
    const rowStr = _this.columns.map(function(col) {
      const content = col.render ? col.render(rowData) : rowData[col.dataIndex]
      return `<td>${content}</td>`
    }).join('')

    return `<tr>${rowStr}</tr>`
  })
  return tbody.join('')
}
Table.prototype.updateBody = function (data) {
  // 更新 data 数据，重新渲染 tbody
  this.data = data
  const tbody = this.el.querySelector('tbody')
  tbody.innerHTML = this.createBody()
}